<script>
import { fetchMyList } from '@/api/job'

export default {
  data() {
    return {
      searchContent: '',
      jobList: []
    }
  },
  methods: {
    getData() {
      fetchMyList(this.searchContent)
        .then(res => {
          console.log(res)
          const msg = res.message
          msg.forEach(el => {
            el.companyInfo = JSON.parse(el.companyInfo)
            el.tip = el.tips.includes(',') ? el.tips.split(',') : el.tips.split('，')
          })
          this.jobList = msg
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
    },
    reset() {
      this.searchContent = ''
      this.getData()
    }
  },
  mounted() {
    this.getData()
  }
}
</script>

<template>
  <div>
    <div class="d-flex ai-center jc-end">
      <el-input
        v-model="searchContent"
        placeholder="请输入职位名称"
        prefix-icon="el-icon-search"
        style="max-width: 220px;margin-right: 10px;"
      />
      <el-button type="primary" @click="getData">搜索</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
      <el-button type="primary">新增</el-button>
    </div>

    <el-table :data="jobList" style="width: 100%;margin-top: 20px" height="75vh">
      <el-table-column type="index" width="50" />
      <el-table-column label="职位名称" prop="jobName" width="180" />
      <el-table-column label="工作圈子" prop="jobCircle" width="100" />
      <el-table-column label="地址" prop="address" width="180" />
      <el-table-column label="公司" prop="companyInfo.name" width="180" />
      <el-table-column label="招聘人数" prop="peopleCount" width="80" />
      <el-table-column label="薪资构成" prop="salaryType" width="180" />
      <el-table-column label="工作类型" prop="workType" width="80" />
      <el-table-column label="工作经验" prop="workExperience" width="80" />
      <el-table-column label="学历" prop="education" width="80" />
      <!--      <el-table-column label="岗位要求" prop="required" width="380" />-->
      <!--      <el-table-column label="岗位职责" prop="responsibility" width="380" />-->
      <el-table-column label="薪资" width="120">
        <template slot-scope="scope">
          <div>
            {{scope.row.salaryStart}}-{{scope.row.salaryEnd}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="职位标签" width="240" >
        <template slot-scope="scope">
          <div class="d-flex flex-wrap">
            <el-tag
              v-for="(item,index) in scope.row.tip"
              :key="index"
              type="info"
              effect="plain">
              {{ item }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" >
        <template slot-scope="scope">
          <div class="d-flex flex-wrap">
            <el-button type="primary">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>

</style>
